<script setup>
import {onMounted, ref, shallowReactive, shallowRef} from "vue";
import router from "../../../router";
import {saveApi} from "../../../api/clazz.js";
import {RULE} from "../../../const";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import {getResponseData} from "../../../util";
import {listApi as listDirectionApi} from "../../../api/direction.js";

/* ==================== 查询全部的部门记录 ==================== */
// 所在在陪班级下拉菜单选项
let directionItems = ref([]);

/* ==================== 查询所有在陪班级 ==================== */
async function listDirection() {
  let res = await listDirectionApi();
  let directions = getResponseData(res);
  Object.values(directions).forEach(dire => {
    directionItems.value.push({'label': dire['name'], 'value': dire['id']});
  });
}




/* ==================== 添加表单 ==================== */

// 表单项
let items = shallowRef([
  {'label': '班级名称', 'prop': 'name', 'required': true, 'span': 12},
  {
    'label': '培训方向', 'prop': 'directionId', 'type': 'select', optionItems: directionItems.value,
    'required': true, 'span': 12
  },
  {'label': '班主任', 'prop': 'manager', 'required': true, 'span': 12},
  {'label': '班级描述', 'prop': 'info', 'type': 'textarea'},
]);
// 表单值
let data = shallowReactive({});
// 表单规则
let rules = {
  /*'name': RULE.REALNAME,
  'phone': RULE.PHONE,
  'emergencyContactPhone': RULE.PHONE,
  'idCard': RULE.IDCARD,
  'info': RULE.COMMON_INFO,*/
};

/* ==================== 加载函数 ==================== */
onMounted(() => {
  listDirection()
});

</script>

<template>

  <my-nav :items="[
    {'icon': 'Avatar', 'label': '班级管理', 'url': '/'},
    {'icon': 'User', 'label': '班级列表', 'url': '/Club'},
    {'icon': 'Plus', 'label': '添加班级'},
  ]"/>

  <el-divider/>

  <el-card class="student-insert-card" header="添加班级信息">
    <my-form type="insert"
             :items="items"
             :data="data"
             :rules="rules"
             :api="saveApi"
             :fn="() => router.push('/Club')"/>
  </el-card>
</template>

<style scoped lang="scss">
.student-insert-card {
  width: 80%;
  margin: auto;
}
</style>